<template>
  <wd-form custom-class="custom-form2" ref="form" :model="mode">
    <div class="subname">资质证件</div>
    <wd-cell title="资质证件类型" title-width="200rpx">
      <wd-picker
        :columns="certificateTypeList"
        v-model="mode.certificateType"
        prop="certificateType"
        placeholder="请选择资质证件类型"
        :rules="[{ required: true, message: '请选择资质证件类型' }]"
      />
    </wd-cell>
    <template v-if="mode.certificateType === 1">
      <wd-cell title="营业执照照片" custom-class="vertical-cell" title-width="250rpx" vertical>
        <ImgUpload
          v-model="mode.certificateUrls"
          itemStyle="width: 284rpx;height: 188rpx;border-radius: 27rpx;"
        />
        <div style="height: 40rpx"></div>
      </wd-cell>
      <wd-cell title="企业名称" title-width="150rpx">
        <wd-input
          type="text"
          v-model="mode.enterpriseName"
          prop="enterpriseName"
          :rules="[{ required: true, message: '请输入企业名称' }]"
          placeholder="请输入企业名称"
          suffix-icon="edit"
        />
      </wd-cell>
      <wd-cell title="社会信用代码" title-width="150rpx">
        <wd-input
          type="text"
          v-model="mode.unifiedCreditCode"
          prop="unifiedCreditCode"
          :rules="[{ required: true, message: '请输入社会信用代码' }]"
          placeholder="请输入社会信用代码"
          suffix-icon="edit"
        />
      </wd-cell>
      <wd-cell title="法定代表人" title-width="150rpx">
        <wd-input
          type="text"
          v-model="mode.legalUser"
          prop="legalUser"
          :rules="[{ required: true, message: '请输入法定代表人姓名' }]"
          placeholder="请输入法定代表人姓名"
          suffix-icon="edit"
        />
      </wd-cell>
      <wd-cell title="类型" title-width="150rpx">
        <wd-input
          type="text"
          prop="legalUser"
          :rules="[{ required: true, message: '请选择类型' }]"
          placeholder="请选择类型"
          disabled
        />
      </wd-cell>
      <wd-cell
        custom-class="vertical-cell no-border"
        title="经营范围"
        vertical
        title-width="150rpx"
      >
        <wd-textarea
          type="text"
          v-model="mode.businessScope"
          prop="businessScope"
          :rules="[{ required: true, message: '请输入经营范围' }]"
          placeholder="经营范围需要包含住宿或酒店管理公司等"
        />
      </wd-cell>
    </template>
    <template v-if="mode.certificateType === 2">
      <wd-cell title="有效期" title-width="150rpx">
        <wd-datetime-picker
          v-model="mode.effectiveStartDate"
          placeholder="请选择有效期"
          prop="effectiveStartDate"
          type="date"
          :rules="[{ required: true, message: '请选择有效期' }]"
        />
      </wd-cell>
      <wd-cell title="限至日期" title-width="150rpx">
        <wd-datetime-picker
          v-model="mode.effectiveEndDate"
          placeholder="请选择限至日期"
          prop="effectiveEndDate"
          type="date"
          :rules="[{ required: true, message: '请选择限至日期' }]"
        />
      </wd-cell>
      <wd-cell title="证件照片" custom-class="vertical-cell" title-width="250rpx" vertical>
        <ImgUpload
          v-model="mode.certificateUrls"
          itemStyle="width: 284rpx;height: 188rpx;border-radius: 27rpx;"
        />
        <div style="height: 40rpx"></div>
      </wd-cell>
    </template>
    <template v-if="mode.certificateType === 3">
      <wd-cell title="有效期" title-width="150rpx">
        <wd-datetime-picker
          v-model="mode.effectiveStartDate"
          placeholder="请选择有效期"
          prop="effectiveStartDate"
          type="date"
          :rules="[{ required: true, message: '请选择有效期' }]"
        />
      </wd-cell>
      <wd-cell title="限至日期" title-width="150rpx">
        <wd-datetime-picker
          v-model="mode.effectiveEndDate"
          placeholder="请选择限至日期"
          prop="effectiveEndDate"
          type="date"
          :rules="[{ required: true, message: '请选择限至日期' }]"
        />
      </wd-cell>
      <wd-cell title="证件照片" custom-class="vertical-cell" title-width="250rpx" vertical>
        <ImgUpload
          v-model="mode.certificateUrls"
          itemStyle="width: 284rpx;height: 188rpx;border-radius: 27rpx;"
        />
        <div style="height: 40rpx"></div>
      </wd-cell>
    </template>

    <div class="subname mt-10px">个人证件</div>
    <wd-cell
      title="上传证件照片"
      custom-class="vertical-cell no-border"
      prop="idCardBackUrl"
      vertical
      title-width="250rpx"
    >
      <div class="photo-group">
        <div class="item mr-20rpx">
          <image
            class="photo active"
            :src="mode.idCardFrontUrl || '/static/images/card-1.png'"
            mode="aspectFit"
            @click="chooseAvatar('idCardFrontUrl')"
          />
          <div class="title">证件正面</div>
        </div>
        <div class="item">
          <image
            class="photo active"
            :src="mode.idCardBackUrl || '/static/images/card-2.png'"
            mode="aspectFit"
            @click="chooseAvatar('idCardBackUrl')"
          />
          <div class="title">证件背面</div>
        </div>
      </div>
    </wd-cell>
    <wd-cell title="以上证件照片是否为营业执照法人？" custom-class="vertical-cell" vertical>
      <div class="tags">
        <div class="tag" :class="{ active: mode.isLegal === 1 }" @click="mode.isLegal = 1">是</div>
        <div class="tag" :class="{ active: mode.isLegal === 0 }" @click="mode.isLegal = 0">否</div>
      </div>
    </wd-cell>
    <wd-cell
      v-if="mode.isLegal === 0"
      title="上传授权证明"
      custom-class="vertical-cell"
      title-width="250rpx"
      vertical
    >
      <div class="tips">
        若证件类型为营业执照且证件照片不为营业执照法人，则需要上传授权证明。支持JPG，JPEG，PNG格式，图片大小不超过5M)
      </div>
      <ImgUpload
        v-model="mode.authorizedLetterUrl"
        itemStyle="width: 284rpx;height: 188rpx;border-radius: 27rpx;"
      />
      <div style="height: 30rpx"></div>
    </wd-cell>
    <wd-cell title="姓名" title-width="150rpx">
      <wd-input
        type="text"
        v-model="mode.name"
        prop="name"
        :rules="[{ required: true, message: '请输入姓名' }]"
        placeholder="请输入姓名"
        suffix-icon="edit"
      />
    </wd-cell>
    <wd-cell title="证件号" title-width="150rpx">
      <wd-input
        type="text"
        v-model="mode.idCardNo"
        prop="idCardNo"
        :rules="[{ required: true, message: '请输入证件号' }]"
        placeholder="请输入证件号"
        suffix-icon="edit"
      />
    </wd-cell>
    <div class="subname mt-20px">其他证件</div>
    <wd-cell
      title="特种行业经营许可证（选填）"
      custom-class="vertical-cell"
      title-width="450rpx"
      vertical
    >
      <div class="tips">支持JPG，JPEG，PNG格式，图片大小不超过5M)</div>
      <ImgUpload
        v-model="mode.licenseUrl"
        itemStyle="width: 284rpx;height: 188rpx;border-radius: 27rpx;"
      />
      <div style="height: 30rpx"></div>
    </wd-cell>
  </wd-form>
</template>
<script lang="ts" setup>
import { msgNone } from '@/utils/index'
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
})
defineOptions({ name: 'HotelStep2' })

const certificateTypeList = ref<any>([
  { label: '营业执照', value: 1 },
  { label: '租房合同', value: 2 },
  { label: '房产证', value: 3 },
])

const mode = reactive({
  certificateType: 1,
  certificateUrls: '',
  enterpriseName: '',
  unifiedCreditCode: '',
  legalUser: '',
  businessScope: '',
  effectiveStartDate: '',
  effectiveEndDate: '',
  idCardFrontUrl: '',
  idCardBackUrl: '',
  idCardNo: '',
  name: '',
  isLegal: 1,
  authorizedLetterUrl: '',
  licenseUrl: '',
})

watch(
  () => props.data,
  () => {
    Object.assign(mode, props.data)
  },
  {
    immediate: true,
    deep: true,
  },
)

// 修改头像
function chooseAvatar(key) {
  mode[key] =
    'http://39.108.7.196:9000/homestay-hotels/upload/20240717/df995d0085494409b8d35a2f0b524b0c.png'
  // uni.chooseImage({
  //   count: 1, // 默认9
  //   sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
  //   success(res) {
  //     if (res.errMsg === 'chooseImage:ok') {
  //       uni.showLoading()
  //       http
  //         .uploadFile(res.tempFilePaths[0])
  //         .then((r: any) => {})
  //         .finally(() => {
  //           uni.hideLoading()
  //         })
  //     }
  //   },
  // })
}

const form = ref()
defineExpose({
  validate() {
    return new Promise((resolve, reject) => {
      form.value.validate().then(({ valid, errors }) => {
        if (valid) {
          resolve(mode)
        } else {
          reject(errors)
        }
      })
    })
  },
  mode,
})
</script>
<style lang="scss" scoped>
@import url(../style.scss);
</style>
